<template>
  <div class="mainContainer">
    <header class="header">
      <div class="login_container">
        <div class="div_register_button" @click="register()" :style="displayButton"><span>注册</span></div>
        <div class="div_login_button" @click="login()" :style="displayButton"><span>登录</span></div>
        <img class="img_user_head" :src="head" :style="displayHead" @click="userPage"/>
      </div>
    </header>
    <img class="background-img" :style="imgStyle" src="../assets/index/aurora.jpg">
    <div class="titleContainer">
      <h1 class="title" ref="title">一个免费的网络文件管理系统</h1>
    </div>
  </div>
</template>

<script>
import index from '@/api/index'
import {getCookie} from '../utils/cookieutil'
import storage from 'good-storage'
export default {
  name: "index",
  data() {
    return {
      head: '',
      displayHead: 'display: none',
      displayButton: 'display: block',
      imgStyle: ''
    }
  },
  methods: {
    login: function () {
      this.$router.push("/login")
    },
    register: function () {
      this.$router.push("/register")
    },
    userPage: function () {
      this.$router.push("/user")
    }
  },
  async created() {
    storage.session.set('login',false)
    if (getCookie('token') === null) {
      index.getToken()
    }
    let isLogin = await index.isLogin(this)
    console.log(isLogin.data)
    if (isLogin.data === true) {
      storage.session.set('login',true)
      console.log("User State: Login")
      this.displayButton = 'display: none'
      let that = this
      let callback = (resp) => {
        console.log(resp)
        that.head = resp.data.data.head
        that.displayHead = 'display: block'
        storage.session.set('user',resp.data.data)
      }
      let userinfo = await index.getUserInfo(this,callback)
      console.log(userinfo)
    } else {
      console.log("User State: Guest")
    }
  },
  mounted() {
    let titleElement = this.$refs.title
    let titleHeight = parseInt(window.getComputedStyle(titleElement).width)
    let titleMargin = -(titleHeight / 2)
    titleElement.style.marginLeft = titleMargin.toString() + 'px';
  }
}
</script>

<style lang="less" src="../style/index.less"></style>
